.ht-button-default {
  background-color: #fff;
  border: solid 1px #dcdfe6;
  color: var(--normal-text);
}
.ht-button-default:hover {
  background-color: #ecf5ff;
  border: solid 1px var(--primary-hover);
  color: var(--primary-hover);
}
.ht-button-default:active {
  background-color: #ecf5ff;
  border: solid 1px var(--primary-active);
  color: var(--primary-active);
}
.ht-button-default-disabled {
  opacity: 0.7;
  background-color: #fff;
  border: solid 1px #dcdfe6;
  color: var(--normal-text);
  cursor: no-drop;
}
.ht-button-default-disabled:hover {
  opacity: 0.7;
  background-color: #fff;
  border: solid 1px #dcdfe6;
  color: var(--normal-text);
  cursor: no-drop;
}

.ht-button-primary {
  background-color: var(--primary);
  color: #fff;
}
.ht-button-primary:hover {
  background-color: var(--primary-hover);
  color: #fff;
}
.ht-button-primary:active {
  background-color: var(--primary-active);
  color: #fff;
}
.ht-button-primary-disabled {
  opacity: 0.7;
}
.ht-button-primary-disabled:hover {
  opacity: 0.7;
  background-color: var(--primary);
  color: #fff;
  cursor: no-drop;
}

.ht-button-text {
  color: var(--primary);
}
.ht-button-text:hover {
  color: var(--primary-hover);
}
.ht-button-text:active {
  color: var(--primary-active);
}
.ht-button-text-disabled {
  opacity: 0.7;
}
.ht-button-text-disabled:hover {
  opacity: 0.7;
  color: var(--primary);
  cursor: no-drop;
}

.ht-button-success {
  background-color: #5cb87a;
}
.ht-button-warning {
  background-color: #e6a23c;
}
.ht-button-danger {
  background-color: #f56c6c;
}
.ht-button-error {
  background-color: #f56c6c;
}
.ht-button-round {
  border-radius: 4px;
}
.ht-button-rect {
  border-radius: 0;
}
.ht-button-circle {
  border-radius: 50%;
}
.ht-button-medium {
  width: 150px;
  height: 30px;
  line-height: 30px;
  font-size: 16px;
}
.ht-button-large {
  width: 200px;
  line-height: 50px;
  font-size: 18px;
}
.ht-button-small {
  width: 90px;
  line-height: 20px;
  font-size: 14px;
}
